<template>
  <el-col :span="24" style="height: 75px" class="bg-light shadow fixed-top d-flex justify-content-end animate__animated animate__bounceIn">
    <el-col :span="12" class="h-100 bg-light d-flex justify-content-around align-items-center index-title"
            style="margin-right: 130px">
      <el-col class="h-100">
        <img src="@/assets/logo.png" class="h-100">
      </el-col>
      <el-col>
        <el-link type="info" @click.native="cut(1)">首页</el-link>
      </el-col>
      <el-col>
        <el-link type="info" @click.native="cut(2)">单词练习</el-link>
      </el-col>
      <el-col>
        <el-link type="info">阅读理解</el-link>
      </el-col>
      <el-col>
        <el-link type="info" @click="cut(4)">牛津词典</el-link>
      </el-col>
      <el-col>
        <el-link type="info" @click="cut(5)">翻译</el-link>
      </el-col>
    </el-col>

    <el-col :span="4" class="h-100 d-flex align-items-center justify-content-start">
      <el-col :span="4" class="border" style="border-radius: 50%;overflow: hidden">
        <div style="height: 55px;width: 55px;border-radius: 50%;margin: 0 auto;overflow: hidden">
          <img src="@/assets/test.jpg" height="100%">
        </div>
      </el-col>

      <el-col :span="4" class="ms-4">
        <el-dropdown>
          <span class="el-dropdown-link">
           {{ user.nickname }} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>系统设置</el-dropdown-item>
            <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">

      </el-col>

    </el-col>
  </el-col>

</template>

<script>
let model = {
  user: JSON.parse(localStorage.getItem('user'))
}
export default {
  name: 'HomeHeader',
  data () {
    return model
  },
  methods: {
    cut (index) {
      switch (index) {
        case 1:
          this.$router.push('/index')
          break
        case 2:
          this.$router.push('/wordPractice')
          break
        case 3:
          break
        case 4:
          this.$router.push('/dictionaries')
          break
        case 5:
          this.$router.push('/translate')
          break
      }
    },
    loginOut () {
      localStorage.removeItem('token')
      location.reload()
    }
  }
}
</script>

<style scoped>
.index-title > div {
  color: #999;
}
</style>
